<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 表单 搜索 -->
      <el-form :inline="true" :model="fiterParams" ref="fiter" class="demo-form-inline">
        <el-form-item prop="tagName" label="标签名称">
          <el-input v-model="fiterParams.tagName" style="width:175px;margin-right:50px" placeholder=""></el-input>
        </el-form-item>
        <el-form-item prop="state" label="状态">
          <el-select v-model="fiterParams.state" style="width:175px" placeholder="请选择状态">
            <el-option v-for='item in status ' :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel" size="small">取消</el-button>
          <el-button @click="search" type="primary" size="small">查询</el-button>
          <el-button @click="back" style="margin-left: 130px;" icon="el-icon-back" type="text" v-if="this.id">返回学科</el-button>
          <!-- 添加标签按钮 -->
          <el-button @click="addNew" class="filter-item fr" size="small" style="margin-left: 10px;" type="success" icon="el-icon-edit">添加标签</el-button>
        </el-form-item>
        <!-- 返回学科 -->

      </el-form>
      <!-- 消息 提示-->
      <el-alert class="message" :title="`数据一共有${total}条`" type="info">
      </el-alert>
      <!-- 标签列表 -->
      <el-table :data="list" style="width: 100%">
        <el-table-column type="index" label="序号">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科">
        </el-table-column>
        <el-table-column prop="tagName" label="标签名称">
        </el-table-column>
        <el-table-column prop="creatorID" label="创建者">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template v-slot='scope'>
            <p>{{scope.row.addDate|formatTime}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量">
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template v-slot='scope'>
            {{scope.row.state===1 ? '已启用':'已禁用'}}
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template v-slot='scope'>
            <el-button type="text" @click="changeState(scope.row)">{{scope.row.state===1?'禁用':'启用'}}</el-button>
            <!-- <el-button type="text" @click="changeState(scope.row)" v-else>禁用</el-button> -->
            <el-button type="text" v-if="!scope.row.state" @click="edit(scope.row)">修改</el-button>
            <el-button type="text" v-else disabled>修改</el-button>
            <el-button type="text" v-if="!scope.row.state" @click="deleteTag(scope.row)">删除</el-button>
            <el-button type="text" v-else disabled>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination class="page" background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout=" ->,prev, pager, next, sizes, jumper" :current-page="fiterParams.page" :page-size="fiterParams.pagesize" :total="total" :page-sizes='[5,10,20,50]'>
      </el-pagination>
    </el-card>
    <!-- 弹框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
      <el-form :model="newTag" ref="new" label-width="100px" class="demo-ruleForm">
        <el-form-item label="所属学科" prop="subjectID">
          <el-select v-model="newTag.subjectID" placeholder="请选择活动区域">
            <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="tagName">
          <el-input v-model="newTag.tagName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancelSubmit">取 消</el-button>
          <el-button @click="submit" type="primary">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// 导入moment
import moment from 'moment'
import { simple } from '@/api/hmmm/subjects.js'
import { status } from '@/api/hmmm/constants.js'
import { list, changeState, add, remove, detail, update } from '@/api/hmmm/tags.js'
export default {
  data () {
    return {
      id: null,
      // title
      title: '添加标签',
      // 添加标签
      newTag: {
        subjectID: null,
        tagName: null,
        id: null
      },
      // 学科列表
      subjectList: [],
      // 弹框
      dialogVisible: false,
      // 按钮禁用
      disabled: false,
      // 获取标签列表
      list: [],
      // 总条数
      total: 0,
      status: status,
      // 获取列表传参
      fiterParams: {
        subjectID: null,
        state: null,
        tagName: null,
        page: 1,
        pagesize: 10
      },
      toggle: {
        id: null,
        state: null
      }

    }
  },
  filters: {
    formatTime (time) {
      return moment(time).format('yyyy-MM-DD HH:MM:SS')
    }
  },
  methods: {
    back () {
      this.$router.push('/subjects/list')
    },
    // 新增标签
    addNew () {
      this.dialogVisible = true
      this.title = '添加标签'
    },
    //  编辑  修改
    async edit (row) {
      this.dialogVisible = true
      this.title = '编辑标签'
      try {
        const ret = await detail(row)
        console.log(ret)
        this.newTag = ret.data
      } catch (error) {
        this.$message.error('获取详情数据失败')
      }
    },
    // 删除标签
    deleteTag (row) {
      this.$confirm('此操作将永久删除该标签，是否继续？', '提示', {
        type: 'warning'
      }).then(async () => {
        // 删除接口
        await remove(row)
        // 刷新页面
        this.getTagList()
      }).catch((e) => {
        if (e === 'cancel') {
          console.log('取消删除')
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    // 取消提交
    cancelSubmit () {
      this.newTag.id = null
      this.$refs.new.resetFields()
      this.dialogVisible = false
    },
    // 添加  编辑确认
    async submit () {
      if (this.newTag.id) {
        try {
          await update(this.newTag)
          this.newTag.id = null
          this.$refs.new.resetFields()
          this.dialogVisible = false
          this.getTagList()
        } catch (error) {
          this.$message.error('编辑标签失败')
        }
      } else {
        try {
          await add(this.newTag)
          this.getTagList()
          this.newTag.id = null
          this.$refs.new.resetFields()
          this.dialogVisible = false
        } catch (error) {
          this.$message.error('添加标签失败')
        }
      }
    },
    // 获取学科列表
    async simple () {
      try {
        const ret = await simple()
        // console.log(ret)
        this.subjectList = ret.data
      } catch (error) {
        this.$message.error('获取学科列表失败')
      }
    },
    // 取消按钮
    cancel () {
      this.$refs.fiter.resetFields()
    },
    // 改变状态操作
    async changeState (row) {
      try {
        const sta = row.state === 1 ? 0 : 1
        const ret = await changeState({
          id: row.id,
          state: sta
        })
        if (ret.data.success) {
          row.state = sta
        }
        // row.state = row.state === 0 ? 1 : 0
      } catch (error) {
        this.$message.error('切换状态失败')
      }
    },
    // 查询
    async search () {
      this.fiterParams.page = 1
      this.getTagList()
    },
    // 每页条数改变
    handleSizeChange (pages) {
      this.fiterParams.pagesize = pages
      this.getTagList()
    },
    // 页码改变
    handleCurrentChange (page) {
      this.fiterParams.page = page
      this.getTagList()
    },
    // 获取列表
    async getTagList () {
      try {
        const ret = await list(this.fiterParams)
        console.log(ret)
        // 内容
        this.list = ret.data.items
        console.log(this.list)
        // 条数
        this.total = ret.data.counts
      } catch (error) {
        console.log(error)
        this.$message.error('获取标签列表失败')
      }
    }
  },
  watch: {
    $route (to) {
      if (!to.query.id) {
        this.id = false
      }
    }
  },
  created () {
    this.getTagList()
    this.simple()
    // 判断是否有id
    if (this.$route.query.id) {
      this.fiterParams.subjectID = this.$route.query.id
      // 如果有id  将参数id改为true
      this.id = true
      this.getTagList()
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  margin-top: 15px;
  margin-left: 10px;
  .page {
    margin-top: 10px;
  }
  .message {
    margin: 10px 0;
  }
}
</style>
